<template>
	<view class="img-box">
		<image class="img" :src="$imgUrl + info.bg_img" mode="widthFix" lazy-load="true" :show-menu-by-longpress="true"></image>
		<view class="link-box" v-for="(item, li) in info.list" :key="li" :style="[img_style(item)]"
			@click.stop="goUrl(item)"></view>
	</view>
</template>

<script setup>

const { proxy } = getCurrentInstance()

const props = defineProps({
	info: { type: Object, default: {} }
})
function goUrl(item) {
	let url = item.url || item.link
	proxy.$go(url)
}

const img_style = computed(() => (item) => {
	return {
		width: `${item.w*2}rpx`,
		height: `${item.h*2}rpx`,
		left: `${item.x*2}rpx`,
		top: `${item.y*2}rpx`,
		zIndex: `${item.z}`,
	}
})

</script>

<style lang="scss" scoped>
.img-box {
	width: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
	.img {
		width: 100%;
		height: auto;
	}

	.link-box {
		position: absolute;
	}
}
</style>
